<template>
    <div class="top-menu-left">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/layout/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbs.slice(1)"
          :key="index"
          :to="{ path: item.path }"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="top-menu-right" v-if="userInfo">
      <span>欢迎 {{ userInfo.account }} 登录</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="iconfont icon-xiangxia"></i>
        </span>
        <template v-slot:dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="gotoAccountCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
  
      <img v-if="userInfo.imgUrl" :src="serverUrl + userInfo.imgUrl" alt="用户头像" class="user-avatar" />
      <span v-else class="placeholder-avatar">无头像</span>
    </div>
  </template>
  <script setup>
  import { ref, computed, watch } from 'vue';
  import { ArrowRight } from '@element-plus/icons-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { accountInfo } from '@/api/account.js';
  import { serverUrl } from '@/utils/components.js';
  import { userStore } from '@/stores/userStore.js';
  
  const route = useRoute();
  const router = useRouter();
  
  // 面包屑导航计算属性
  const breadcrumbs = computed(() => {
    const matched = route.matched;
    return matched.filter((item) => item.meta && item.meta.title);
  });
  
  // 用户信息
  const userId = ref(JSON.parse(sessionStorage.getItem('userInfo'))?.id || null);
  const userInfo = ref({});
  
  const getAccountInfo = async () => {
    if (!userId.value) {
      return;
    }
    try {
      const res = await accountInfo({ id: userId.value });
      userInfo.value = res.accountInfo || {};
    } catch (error) {
      ElMessage.error('获取用户信息失败');
      userInfo.value = {};
    }
  };
  
  getAccountInfo();
  
  // 监听用户头像的更新
  watch(
    userStore.imgUrl,
    () => {
      getAccountInfo();
    },
    { immediate: true }
  );
  
  // 跳转到个人中心
  const gotoAccountCenter = () => {
    router.push('/account-center');
  };
  
  // 注销登录
  const logout = () => {
    // 清理用户信息、sessionStorage 等
    ElMessage.success('注销成功');
    router.push('/login');
  };
  </script>
  <style scoped>
  @import '@/assets/iconfont/iconfont.css';
  
  .top-menu-left {
    flex: 1;
  }
  
  .top-menu-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .top-menu-right img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    object-fit: cover;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
  
  .placeholder-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #ccc;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
  
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  
  .el-icon-arrow-down {
    font-size: 12px;
  }
  </style>
  